<!-- 管理后台布局页 -->
<template>
  <a-layout class="my-layout">
    <a-layout-content class="my-content">
      <!--      左侧菜单-->
      <a-layout class="sub-layout">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
          <a-menu mode="inline" :items="items" theme="dark" @click="handleMenuClick" v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys">
          </a-menu>
        </a-layout-sider>
        <!--        右侧内容-->
        <a-layout-content class="sub-content">
          <!--          页面-->
          <router-view class="my-page"></router-view>
          <!--          页脚-->
          <div class="clear text-center margin-bottom-20">keller-service</div>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts">
import PageHeader from "@/components/PageHeader.vue";
import PageFoot from "@/components/PageFoot.vue";

import { h } from "vue";

import { getIcon } from "@/utils/IconUtils";

import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
import Icon from "@/components/Icon.vue";


export default {
  components: {
    Icon,
    PageFoot,
    PageHeader,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    SettingOutlined,
  },
  data() {
    return {
      items: [
        {
          key:"index",
          label:"系统总览"
        },{
          key:"system",
          label:"系统设置",
          children:[
            {
              key:"sTaskFlow",
              label:"任务流程"
            },
            {
              key:"sDisplayInterface",
              label:"显示界面"
            },
            {
              key:"sControl",
              label:"控制界面"
            }
          ]
        },{
          key:"evaluate",
          label:"绩效建模与界面评价",
          children:[
            {
              key:"eAttention",
              label:"注意力分配评估"
            },
            {
              key:"eLoad",
              label:"工作负荷评估"
            },
            {
              key:"eAwareness",
              label:"情景意识评估"
            },
            {
              key:"eOperate",
              label:"操作绩效评估"
            },
            {
              key:"eInterface",
              label:"界面评估"
            }
          ]
        }
      ],
      openKeys: [],
      selectedKeys: [],
      collapsed: false,
      breadCrumbVO: {
        groupName: "",
        menuName: "",
      },
      nickName: "Keller",
      authUser: {},
    };
  },
  methods: {
    handleMenuClick(e) {
      console.log("handleMenuClick", e);
      this.$store.dispatch("selectedItem", e);
      localStorage.setItem("selectedMenuItem", JSON.stringify(e));
      this.breadCrumbVO.menuName = e.item.originItemValue.label;
      this.breadCrumbVO.groupName = e.item.title;
      this.$router.push(e.key);
    },
    handleLogout() {
      //TODO 清除浏览器缓存，清除服务器缓存
      localStorage.clear();
      this.$router.push("/login");
    },
  },
  computed: {},
  watch: {},
  created() {
    const storedItem = localStorage.getItem("selectedMenuItem");
    if (storedItem) {
      this.$store.dispatch("selectedItem", JSON.parse(storedItem));
    }
  },
  mounted() {

    console.log("-----",this.$router.options.routes);
    let list = this.$router.options.routes[1].children;
    console.log("-----",list);


    for (let item of list) {
      console.log(item.path,item.page.title);
    }

    const selectedItem = this.$store.state.selectedItem;
    this.openKeys.push(selectedItem?.keyPath[0]);
    this.selectedKeys.push(selectedItem?.keyPath[1]);
    this.breadCrumbVO.menuName = selectedItem?.item.originItemValue.label;
    this.breadCrumbVO.groupName = selectedItem?.item.originItemValue.title;
  },
};
</script>
<style scoped>
.my-layout {
  /* 设置为视口高度 */
  height: 100vh;
}

.sub-content {
  flex: 1; /* 自适应内容区域高度 */
  overflow-y: auto; /* 防止内容溢出 */
  margin: 0;
  padding: 0;
}

.sub-layout {
  height: 100%;
}

.sub-title {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  background-color: white;
  padding: 0 16px;
}

.my-bread {
  padding-top: 14px;
  padding-left: 10px;
}

.my-page {
  margin: 8px;
  padding: 8px;
  background-color: white;
}
</style>